<template>
  <div>
    <a-modal v-model:visible="visible" :width="600" title="新增优秀案例" @cancel="cacelModel" :bodyStyle="bodyStyle"  @ok="handleOk">
      <a-form :model="formState" ref="caseForm" labelAlign="left" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row>
          <a-col :span="24">
            <a-alert :style="{marginBottom: '24px', border: 0, background: '#EDF4FF', height: '32px', lineHeight: '32px'}" message="请选择要添加的合同，经审批后，供大家学习" type="info" show-icon />
            <div class="form-item-border">
              <a-form-item label="合同类别" name="typeOfContract" :rules="[{ required: true, message: '请选择合同类别' }]">
                <a-select :bordered="false" @change="typeChange" v-model:value="formState.typeOfContract" placeholder="请选择合同类别" :options="contractType" />
              </a-form-item>
            </div>
            <div class="form-item-border">
              <a-form-item label="合同名称"  name="contractName" :rules="[{ required: true, message: '请输入合同名称' }]">
                <a-select :bordered="false" v-model:value="formState.contractName" placeholder="请输入合同名称"
                          show-search
                          :field-names="{ label: 'contractName', value: 'id'}"
                          :filter-option="filterOption"
                          :options="contrctList">
                </a-select>
              </a-form-item>
            </div>
            <div class="form-item-border" :style="{height: '30%'}">
              <a-form-item label="优秀之处"  name="excellent" :rules="[{ required: true, message: '请输入优秀之处' }]">
                <a-textarea :bordered="false" :autoSize="{minRows: 4, maxRows: 10}"  v-model:value="formState.excellent" :row="4" placeholder="请输入优秀之处"/>
              </a-form-item>
            </div>
          </a-col>
        </a-row>
      </a-form>
      <template #footer>
        <div class="from-btn-right">
          <a-button key="back" class="border-btn" @click="cacelModel">取消</a-button>
          <a-button key="submit" @click="handleOk" :loading="confirmLoading" class="search-btn1">保存</a-button>
        </div>
      </template>
    </a-modal>
  </div>
</template>

<script setup>
import {getCurrentInstance, reactive, ref, defineEmits} from "vue";
import {message} from "ant-design-vue";
const { proxy  } = getCurrentInstance()
const visible = ref(false);
const isSubmit = ref(false)
const emit = defineEmits(['saveMemForm'])
const bodyStyle = ref({})
const contractType = ref([
  {
    label: '资源合同-MA',
    value: 1
  },
  {
    label: '船运合同',
    value: 2
  },
  {
    label: '船舶代理合同',
    value: 3
  },
  {
    label: '第三方计量合同',
    value: 4
  },
  {
    label: '保险合同-货险',
    value: 5
  },
  {
    label: '加油合同',
    value: 6
  },
  {
    label: '律师合同',
    value: 7
  },
  {
    label: '资源合同-CN',
    value: 8
  },
  {
    label: '保险合同-租船人责任险',
    value: 9
  },
])
const labelCol = ref(
    {
      style: {
        width: '80px'
      },
    },
)

const wrapperCol = ref({
  span: 20
})
const formState = reactive({
  contractName: undefined,
  typeOfContract: undefined,
  applicant: '',
  archiveTime: '',
  excellent: ''
})
const caseForm = ref()
const showModal = () => {
  visible.value = true
  console.log('formAdd', caseForm.value)
};
const cacelModel = () =>{
  visible.value = false
  isSubmit.value = false
  caseForm.value.resetFields()
}
const confirmLoading = ref(false)
const handleOk = () => {
  caseForm.value.validateFields().then(() => {
    console.log('上传的formData', formState);
    confirmLoading.value = true
    proxy.$api.postAddCase(formState).then(res => {
      if (res.resultCode === 0) {
        visible.value = false;
        isSubmit.value = true
        confirmLoading.value = false
        emit('saveMemForm', isSubmit.value)
        message.success('新增合同案例成功')
        caseForm.value.resetFields()
      }
    })
  }).catch(err => {
    console.log('请输入', err)
  })
}
const typeChange = () => {
  getList()
}
const contrctList = ref([])
const getList = () => {
  proxy.$api.getContractAllList({module: formState.typeOfContract}).then(res => {
    contrctList.value = res.resultObject
    console.log('所有合同', contrctList.value)
  })
}
const filterOption = (input, option) => {
  if (option['contractName'].indexOf(input) != -1) {
    return option
  }
}
// eslint-disable-next-line no-undef
defineExpose({
  showModal,
  handleOk
})
</script>

<style lang="scss" scoped>
.form-item-flex {
  display: flex;
  justify-content: space-between;
  .form-item-border {
    margin-right: 4px;
  }
}
.from-btn-right {
  height: 62px;
  line-height: 62px;
  background: #ffffff;
  // box-shadow: 0px -4px 9px 0px rgba(0,0,0,0.09);
}
.dragger-img {
  margin-top: 40%;
  img {
    width: 114px;
    height: 110px;
  }
}
</style>
